<template>
	<view>
		<view class="container">
			<view @click="changeModel()">
				<back></back>
			</view>
			<form @submit="submit">
				<view class="form">
					<view class="inputWrapperText">
						<text>血压高压值</text>
					</view>
					<view class="inputWrapper">
						<input class="input" v-model="bloodPressure" maxlength="4" type="text" value="" placeholder="" />
<!-- 						<view v-if="healthNote">
							<view class="healthGonICon">
								<text>?</text>
							</view>
						</view> -->
						<view class="voiceInput" @click="voiceInput()">
							<image class="voiceInputImg" src="../../static/logo.png" mode=""></image>
						</view>

					</view>
					<view class="inputWrapperText">
						<text>血压高压值</text>
					</view>
					<view class="inputWrapper">
						<input class="input" v-model="bloodLow" maxlength="4" type="text" value="" placeholder="" />
						<view class="voiceInput">
							<image class="voiceInputImg" src="../../static/logo.png" mode=""></image>
						</view>
					</view>
					<view class="inputWrapperText">
						<text>血压高压值</text>
					</view>
					<view class="inputWrapper">
						<input class="input" v-model="bloodSugar" maxlength="4" type="text" value="" placeholder="" />
						<view class="voiceInput">
							<image class="voiceInputImg" src="../../static/logo.png" mode=""></image>
						</view>
					</view>
				</view>
				<button form-type="submit" class="loginBtn">保存</button>
			</form>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bloodPressure: '', //高血压值
				bloodLow: '', //低血压值
				bloodSugar: '', //血糖值
				healthNote: true,


			};
		},
		methods: {
			changeModel() {
				let data = {
					showHealth: false,
					showIndex: true,
					title: ''
				}
				this.$emit('fHealth', data);
				this.changeHealthNote();

			},
			changeHealthNote() {
				let data = {
					healthNote: false
				}
				this.$emit('changeHealthNote', data)
			},

			//语音输入
			voiceInput(){
				
			},

			//保存
			submit() {
				var time = this.$p.getNowFormatDate();
				console.log(time);
				if (this.bloodPressure == '' || this.bloodLow == '' || this.bloodSugar == '') {
					console.log('输入不完整');
					uni.$showMsg('输入不完整');
				} else {
					this.$request.post('/Health/SetHealthCache', {
						healthId: "",
						userId: "",
						time: "2023-3-20",
						step: 5000,
						bloodLow: "70",
						bloodPressure: "86",
						heartRate: "60",
						bloodSugar: "8.4",
						sign: 0
					}).then(data => {
						console.log(data, 'data')
						if (data.data.code == "200") {
							this.changeHealthNote();
							uni.$showMsg("保存成功");
						}
					})
				}
			},
		}
	}
</script>

<style>
	.container {
		width: 90%;
		height: 75vh;
		position: relative;
		top: -8vh;
		margin: 0 auto;
		background-color: #ffffff;
		/* border: 1rpx solid #000000; */
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 3vw;
	}

	.form {
		padding: 0 75rpx;
		margin-top: 30px;
	}

	.inputWrapper {
		width: 100%;
		height: 120rpx;
		background: white;
		border-radius: 20px;
		/* box-sizing: border-box; */
		padding-left: 10px;
		
		display: flex;
		justify-content: left;
		/* padding: 0 20px; */
		/* margin-top: 25px; */
	}

	.inputWrapperText {
		width: 100%;
		height: 50rpx;
		margin: 2vh 0;
		font-size: 46rpx;
		font-weight: 500;
	}

	.inputWrapper .input {
		width: 80%;
		height: 100%;
		text-align: left;
		font-size: 50rpx;
		position: relative;
		text-indent: 15%;
		color: #41928A;
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh;
	}

	.healthGonICon {
		width: 75rpx;
		height: 75rpx;
		text-align: center;
		font-size: 48rpx;
		line-height: 80rpx;
		background-color: #F6681D;
		color: #ffffff;
		border-radius: 50%;
	}

	.voiceInput {
		width: 100rpx;
		height: 100rpx;
		
		margin-left: 5vw;
		margin-top: 1vh;
	}

	.voiceInputImg {
		max-width: 100%;
		max-height: 100%;
	}

	.loginBtn {
		width: 80%;
		height: 120upx;
		color: #FFFFFF;
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		background: linear-gradient(#FEBC86, #F76D2E);
		border-radius: 2vh;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;

	}
</style>
